<template lang="html">
  <nav class="navClass">
    <nuxt-link :to="{path:'/'}">Home</nuxt-link>
    <nuxt-link :to="{path:'/about'}">about</nuxt-link>
    <nuxt-link :to="{path:'/join'}">join</nuxt-link>
    <nuxt-link :to="{path:'/study'}">study</nuxt-link>
  </nav>
</template>

<script>
export default {
}
</script>

<style lang="css">
.navClass{
  width: 100%;
  height: 50px;
  background-color: SkyBlue;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.navClass > a{
  padding: 5px;
  margin: 5px;
  font-size:30px;
  border: 1px solid #0000ff;
}
</style>
